<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
  <title>example</title>
  <link rel="stylesheet" type="text/css" href="example.css">
  <script src="../data.js"></script>
  <script src="example.js"></script>
</head>
<body>
<!-- 表单面板  -->
<div id="formPanel" class="panel">
  <div class="panel-title">表单</div>
  <table width="100%">
    <!-- 姓名 -->
    <tr>
      <td>user.name:</td>
      <td><input data-name="user.name" type="text" /></td>
    </tr>
    <!-- 年龄 -->
    <tr>
      <td>user.age:</td>
      <td><input data-name="user.age" type="text" /></td>
    </tr>
    <!-- 性别 -->
    <tr>
      <td>user.sex:</td>
      <td>
        <select data-name="user.sex">
          <option value="">--请选择--</option>
          <option value="male">男</option>
          <option value="female">女</option>
        </select>
      </td>
    </tr>
    <!-- 是否单身 -->
    <tr>
      <td>user.isSingle:</td>
      <td><input data-name="user.isSingle" type="checkbox"/></td>
    </tr>
    <!-- 兴趣 -->
    <tr>
      <td>user.hobby</td>
      <td>
        <select data-name="user.hobby" multiple="multiple">
          <option value="football">足球</option>
          <option value="basketball">篮球</option>
          <option value="tennisball">羽毛球</option>
        </select>
      </td>
    </tr>
    <!-- 备注 -->
    <tr>
      <td>remark:</td>
      <td><input data-name="remark" type="text" /></td>
    </tr>
  </table>
  <button onclick="clearForm()">清空</button>
</div>
<!-- END 表单面板  -->

<!-- 结果面板  -->
<div id="resultPanel" class="panel">
  <div class="panel-title">结果</div>
  <!-- 结果 -->
  <pre id="result"></pre>
  <button onclick="clearResult()">清空</button>
</div>
<!-- END 结果面板  -->

<!-- 表达式面板 -->
<div id="expressionPanel" class="panel">
  <div class="panel-title">表达式</div>
  <!-- 表达式文本框 -->
  <textarea id="expression"></textarea>
  <!-- 表达式列表 -->
  <select id="expressionList" multiple="multiple" onclick="selectExpression(this)">
    <!-- 文本框user.name -->
    <option 
      value="_('user.name', '小强')">
            1、输入框user.name - 赋值“小强”
    </option>
    <option 
      value="_('user.name', '小红')">
            1、输入框user.name - 赋值“小红”
    </option>
    <option 
      value="_('user.name')">
            1、输入框user.name - 获取
    </option>
    <option 
      value="_('user.name', null)">
            1、输入框user.name - 重置
    </option>
    <!-- END 文本框user.name -->
    
    <!-- 下拉框框user.sex -->
    <option 
      value="_('user.sex', 'female')">
            2、下拉列表框user.sex - 选择“女”
    </option>
    <option 
      value="_('user.sex', 'male')">
            2、下拉列表框user.sex - 选择“男”
    </option>
    <option 
      value="_('user.sex')">
            2、下拉列表框user.sex - 获取
    </option>
    <option 
      value="_('user.sex', null)">
            2、下拉列表框user.sex - 重置
    </option>
    <!-- END 下拉框框user.sex -->
    
    <!-- 多选下拉框user.hobby -->
    <option 
      value="_('user.hobby', ['football', 'tennisball'])">
            3、多选列表框user.hobby - 选择“足球”和“羽毛球”
    </option>
    <option 
      value="_('user.hobby', ['basketball'])">
            3、多选列表框user.hobby - 选择“篮球”
    </option>
    <option 
      value="_('user.hobby')">
            3、多选列表框user.hobby - 获取
    </option>
    <option 
      value="_('user.hobby', null)">
            3、多选列表框user.hobby - 重置
    </option>
    <!-- END 多选下拉框user.hobby -->
    
    <!-- 复选框user.isSingle -->
    <option 
      value="_('user.isSingle', true)">
            4、复选框user.isSingle - 勾上
    </option>
    <option 
      value="_('user.isSingle', false)">
            4、复选框user.isSingle - 不勾
    </option>
    <option 
      value="_('user.isSingle')">
            4、复选框user.isSingle - 获取
    </option>
    <option 
      value="_('user.isSingle', null)">
            4、复选框user.isSingle - 重置
    </option>
    <!-- END 复选框user.isSingle -->
    
    <!-- 同时设置多个页面变量 -->
    <option
      value="_(['user.name', 'remark'], {})">
            5、同时设置多个页面变量（无默认值）
    </option>
    <option
      value="_(['user.name', 'remark'], {}, '这是给定的默认值')">
            5、同时设置多个页面变量（有默认值）
    </option>
    <!-- END 同时设置多个页面变量 -->
    
    <!-- “user.”开头的页面变量 -->
    <option 
      value="_('user.*', {'user.name': '小明', 'user.age': 12, 'user.sex': 'male'})">
           6、设置“user.”开头的页面变量
    </option>
    <option 
      value="_('user.*', {'user.name': '小芳', 'user.age': 11, 'user.sex': 'female'})">
           6、设置“user.”开头的页面变量
    </option>
    <option 
      value="_('user.*')">
            6、获取“user.”开头的页面变量
    </option>
    <option 
      value="_('user.*', {}, null)">
            6、重置“user.”开头的页面变量
    </option>
    <!-- END “user.”开头的页面变量 -->
    
    <!-- 同时多个页面变量 -->
    <option 
      value="_(['user.name', 'user.age'], {'user.name': '张三', 'user.age': 3})">
            7、同时设置user.name和user.age
    </option>
    <option 
      value="_(['user.name', 'user.age'], {'user.name': '李四', 'user.age': 4})">
            7、同时设置user.name和user.age
    </option>
    <option 
      value="_(['user.name', 'user.age'])">
            7、同时获取user.name和user.age
    </option>
    <option 
      value="_(['user.name', 'user.age'], {}, null)">
            7、同时置空user.name和user.age
    </option>
    <!-- END 同时多个页面变量 -->
    
    <!-- 同時全部页面变量 -->
    <option 
      value="_('*', {'user.name': '王五', 'user.age': 5, 'remark': '这是王五'})">
            8、同時设置全部页面变量
    </option>
    <option 
      value="_('*', {'user.name': '赵六', 'user.age': 6, 'remark': '这是赵六'})">
            8、同時设置全部页面变量
    </option>
    <option 
      value="_('*')">
            8、同时获取全部页面变量
    </option>
    <option 
      value="_('*', {}, null)">
            8、同时重置全部页面变量
    </option>
    <!-- END 同時全部页面变量  -->
  </select>
  
  
  <div style="position: relative; width: 100%; clear: both;">
    <button onclick="clearExpression()">清空</button>
    <button onclick="executeExpression()">执行</button>
    <div style="position: absolute; right: 0; top: 0;"><input id="executeWhenSelected" type="checkbox"  />选中表达式立即执行</div>
  </div>
</div>
<!-- END 表达式面板  -->
</body>
</html>
